<template>
	<view v-for="item in listData" :key="item.aid" class="pets"  @click="gotoNext(item)" >
		<view class="pet-name">
			{{item.atype}}
		</view>
		<view class="pet-msg">
		<image :src="item.aphoto" class="pet-img"></image>
		<view class="pet-desc">
		<p class="desc">{{item.adesc}}</p>
		<view>{{item.arequirements}}</view>
		</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {defineProps} from "vue"

const prop = defineProps({
	listData:{
		type:Object,
		required:true,
		default: false,
	}
})

function gotoNext(item){
		uni.navigateTo({
			url:"/pages/doption/need-doption",
		})
	}
</script>

<style scoped lang="scss">
.pets{
	height: 380rpx;
	width: 97%;
	padding: 10rpx;
	margin: 10rpx;
	background-color: rgb(255, 228, 245);
	border-radius: 35rpx;
	
	>.pet-name{
		font-weight: 600;
		margin: 20rpx 0;
	}
	
	>.pet-msg{
		display: flex;
		justify-content: space-between;
		align-items: center;
		>.pet-img{
			height: 250rpx;
			width: 250rpx;
		}
		>.pet-desc{
			width: 450rpx;
			height: 250rpx;
			>.desc{
				margin-bottom: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
				display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
				-webkit-line-clamp: 3; /*多行在这里修改数字即可*/
				-webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
			}
			
		}
	}
	
}
</style>